<template>
  <div class="main-box">
    <!-- eslint-disable vue/html-closing-bracket-newline -->
    <div class="table-box">
      <ProTable ref="proTable" :columns="columns" :request-api="getRoleList" :data-callback="dataCallback">
        <template #tableHeader>
          <el-button v-auth="'role:add'" type="primary" :icon="CirclePlus" @click="openDrawer('add')">新增角色</el-button>
        </template>

        <template #operation="scope">
          <el-button v-auth="'role:edit'" type="primary" link :icon="EditPen" @click="openDrawer('edit', scope.row)"
            >编辑</el-button
          >
          <el-button v-auth="'role:edit'" type="primary" link :icon="Setting" @click="openPermissionDialog(scope.row)"
            >功能权限</el-button
          >
          <el-button v-auth="'role:edit'" type="primary" link :icon="Setting" @click="openRouteDialog(scope.row)"
            >路由权限</el-button
          >
          <el-button v-auth="'role:delete'" type="primary" link :icon="Delete" @click="deleteRole(scope.row.FId)">删除</el-button>
        </template>
      </ProTable>
    </div>
    <!-- eslint-enable vue/html-closing-bracket-newline -->

    <RoleDrawer ref="roleDrawerRef" @refresh="proTable?.getTableList" />
    <RolePermissionDialog ref="rolePermissionDialogRef" />
    <RoleRouteDialog ref="roleRouteDialogRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { CirclePlus, Delete, EditPen, Setting } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { getRoleList, deleteRole as deleteRoleApi } from "@/api/modules/permission";

import RoleDrawer from "./components/RoleDrawer.vue";
import RolePermissionDialog from "./components/RolePermissionDialog.vue";
import RoleRouteDialog from "./components/RoleRouteDialog.vue";
import type { ProTableInstance } from "@/components/ProTable/interface";
import type { ColumnProps } from "@/components/ProTable/interface";

const proTable = ref<ProTableInstance>();
const roleDrawerRef = ref<InstanceType<typeof RoleDrawer>>();
const rolePermissionDialogRef = ref<InstanceType<typeof RolePermissionDialog>>();
const roleRouteDialogRef = ref<InstanceType<typeof RoleRouteDialog>>();

const columns: ColumnProps[] = [
  { type: "selection", fixed: "left", width: 60 },
  { prop: "FName", label: "角色名称", width: 150, search: { el: "input" } },
  { prop: "FCode", label: "角色编码", width: 150 },
  { prop: "FDescription", label: "角色描述", width: 200 },
  { prop: "operation", label: "操作", fixed: "right" }
];

const dataCallback = (data: any) => ({
  list: data.list,
  total: data.total
});

const openDrawer = (type: "add" | "edit", rowData?: any) => {
  roleDrawerRef.value?.open(type, rowData);
};

const openPermissionDialog = (rowData: any) => {
  rolePermissionDialogRef.value?.open(rowData);
};

const openRouteDialog = (rowData: any) => {
  roleRouteDialogRef.value?.open(rowData);
};

const deleteRole = async (id: string) => {
  try {
    await ElMessageBox.confirm("确认删除该角色?", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning"
    });
    await deleteRoleApi(id);
    ElMessage.success("删除成功");
    proTable.value?.getTableList();
  } catch {
    // 用户取消删除
  }
};
</script>

<style scoped>
.main-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  .table-box {
    flex: 1;
    overflow: hidden;
  }
}
</style>
